<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>文章内容页-荔枝博客</title>
<link rel="icon" th:href="@{/blog/images/favicon.ico}" type="image/ico">
<meta name="keywords" content="blog" />
<meta name="description" content="blog" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.css">
<link th:href="@{/blog/css/m.css}" rel="stylesheet">
<link th:href="@{/blog/css/base_info.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/css/my.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>

    <style>
        .jkl{
            width: 75%;
            margin: 0 auto;
        }
    </style>
    <style type="text/css">
        .comment_list {
            padding-top:40px;
            width:700px;
            margin:0 auto;
        }
        .comment_details {
            float:left;
        }
        .comment_content {
            margin-top:10px;
            font-size:16px;
        }
        .comment_add_or_last {

            margin:0 auto;
            clear: both;
            width:600px;
            height:40px;
            background: #F0F0F0;
            text-align: center;
            line-height: 40px;   //行高（与div保持同高，垂直居中写法）
        }
        .imgdiv{
            float:left;

        }
        .imgcss {
            width:50px;
            height:50px;
            border-radius: 50%;
        }
        .comment_name {
            margin-left:10px;
            color:#3D9EEA;
            font-size:15px;
            font-weight: bolder;
        }
        .layui-icon {
            font-size: 10px;
            color: grey;
        }
        .del {
            margin-left: 55px;
        }
    </style>


    <!--[endif]-->
  <style>
    .markdown-body {
      box-sizing: border-box;
      min-width: 200px;
      max-width: 980px;
      margin: 0 auto;
      padding: 45px;
    }

    @media (max-width: 767px) {
      .markdown-body {
        padding: 15px;
      }
    }
    .ooo{
        display: inline-block;
        z-index: -1;
        position: absolute;
        opacity: 0.8;
        top: 0;
        left: 0;
        height: 400px;
        width: 100%;
        /*background:url("../../static/images/banbox1.jpg");*/
    }
  </style>
</head>
<body>
<header th:replace="blog/header::header-fragment"></header>


<!--top end-->
<div >
    <img  th:src="@{/images/p11.jpg}" class="ooo"/>
</div>

<article class="article_row">
  <!--lbox begin-->
  <div class="rightbox touming" >
    <div class="markdown-body whitebg animated fadeIn" >
      <input type="hidden" id="ablogId" name="blogId" th:value="${info.id}">
      <h1 class="con_tilte" th:text="${info.title}">个人博客，属于我的小世界！</h1>
      <p class="bloginfo"><span th:text="${#dates.format(info.updateTime,'yyyy-MM-dd')}"></span><span th:text="${info.views} + 人已围观"></span></p>
      <p class="con_info"></p>
      <div class="con_text toc-content" data-toc="#toc" th:utext="${info.context}"></div>
    </div>
    <hr>
      <!-- 评论-->
      <div class="whitebg bloglist">
          <h2 class="htitle">所有评论</h2>

          <form class="layui-form" id="commentFrom">
              <div class="form_row">
                  <div class="layui-form-item">
                      <label class="layui-form-label">昵称</label>
                      <div class="layui-input-inline">
                          <input  type="text" id="nickname" name="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称" class="layui-input">
                      </div>
                      <label class="layui-form-label">邮箱</label>
                      <div class="layui-input-inline">
                          <input type="text" id="email" name="email" lay-verify="email" autocomplete="off" class="layui-input">
                      </div>
                  </div>
              </div>
              <div class="layui-form-item layui-form-text">
                  <label class="layui-form-label">内容</label>
                  <div class="layui-input-block">
                      <textarea placeholder="谢谢你的评论" class="layui-textarea" id="content" name="content"></textarea>
                  </div>
              </div>
              <input type="hidden" id="parentComment" name="parentComment" th:value="${0}">
              <input type="hidden" id="blogId" name="blogId" th:value="${info.id}">
              <div class="layui-form-item">
                  <div class="layui-input-block">
                      <button type="button" class="layui-btn" lay-submit="" lay-filter="demo1" id="commentBtn">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                  </div>
              </div>
          </form>

          <hr class="layui-bg-blue">

          <!--显示评论区域-->
          <div class="whitebg comment_list" id="queryComment">
              <h2 >全部评论</h2>
              <hr>
              <div class="comment">

                  <hr>
              </div>
          </div>
      </div>



  </div>

  <!--lbox end-->
   <div class="leftbox touming">
       <div>
           <div id="toc" class="whitebg paihang ">
               <h2 class="htitle">目录</h2>
               <ol class="toc"></ol>
           </div>
       </div>
   </div>
</article>











<!--页脚-->
<footer th:replace="blog/footer::footer-fragment"></footer>

<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.js"></script>
<script th:src="@{/blog/js/comm.js}"></script>
<!--[if lt IE 9]-->
<script th:src="@{/blog/js/modernizr.js}"></script>

<!--评论-->
<!--    添加-->
<script>

    $("#commentBtn").on('click',function () {
        var formData = $("#commentFrom").serialize();
        console.log("==>" + formData)
        $.ajax({
            url: '/insertComment',
            type: 'post',
            data: formData,
            success: function (data) {
                alert("sdaadadasd")
                var s = " ";
                    s += '<div class="comment">';
                    s += '<div class="imgdiv"><img class="imgcss"  th:src="@{/images/me.jpg}"/></div>';
                    s += '<div class="conmment_details">';
                    s +=  '<span class="comment_name">'+data.nickname+'</span>     <span>'+data.createTime+'</span>';
                    s += 	'<div class="comment_content" > '+data.content+'</div>';
                    s += 	'<div class="del">';
                    s += 	'<a class="del_comment"  data-id="1">回复</i></a></div></div><hr></div>';
                $('.comment_list').append(s);
            },
            error: function (data) {
                window.alert(data)
            }
        })
    }) ;



    $(document).ready(function () {
        var id = $("#ablogId").val();
        $.ajax({
            url: '/queryComment/'+id,
            type: 'post',
            success: function (data) {
                var s = " ";
                for (var i = 0 ; i<data.length;i++){
                    s += '<div class="comment">';
                    s += '<div class="imgdiv"><img class="imgcss"  th:src="@{/images/me.jpg}"/></div>';
                    s += '<div class="conmment_details">';
                    s +=  '<span class="comment_name">'+data[i].nickname+'</span>     <span>'+data[i].createTime+'</span>';
                    s += '<div class="comment_content" > '+data[i].content+'</div>';
                    s += 	'<div class="del"> ';
                    s += 	'</div></div><hr></div>';
                }
                $('#queryComment').append(s);
            },
            error: function (data) {
                window.alert(data)
            }
        });
    })
</script>


<script>

    /*鼠标特效 */
    /*这个方法用来随机一个十六进制颜色代码，让每一次点击浮动文字的杨色不同*/
    function co() {
        let colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
        let colorArray = colorElements.split(",");
        let color = "#";
        for (let i = 0; i < 6; i++) {
            color += colorArray[Math.floor(Math.random() * 16)];
        }
        return color;
    }
    let a_idx = 0;
    $(document).ready(function($) {
        $("body").click(function(e) {
            /*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
            let a = ["Hello", "World"];
            let $i = $("<span/>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            let x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index" : 999999,
                "top" : y - 20,
                "left" : x,
                "position" : "absolute",
                "font-weight" : "bold",
                "color" : co()
            });
            $("body").append($i);
            $i.animate({
                    "top" : y - 180,
                    "opacity" : 0
                },
                1500,
                function() {
                    $i.remove();
                });
        });
    });

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
        positionFixedSelector: '.toc-auto',
        positionFixedClass: 'is-position-fixed',
        fixedSidebarOffset: 'auto',
    });
</script>

</body>
</html>
